<template>
  <div class="app-container calendar-list-container b-box">
    <el-button class="filter-item" type="primary" @click="cancel">返回</el-button>
    <el-button class="filter-item" type="primary" v-print="'#printBox'">打印</el-button>
    <div id="printBox" class="w-body info_form">
      <el-form ref="entity" label-width="80px" size="small">
        <el-row class="r-form-row">
          <el-col :span="24">
            <div class="view-title">对账单</div>
          </el-col>
        </el-row>
        <el-row class="r-form-row">
          <el-col :span="8" class="r-form-cell">
            <el-form-item label="对账单" prop="billNo">
              {{entity.billNo}}
            </el-form-item>
          </el-col>
          <el-col :span="8" class="r-form-cell">
            <el-form-item label="客户" prop="customerName">
              {{entity.customerName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总金额" prop="totalAmount">
              {{entity.totalAmount}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="r-form-row">
          <el-col :span="8" class="r-form-cell">
            <el-form-item label="扣款金额" prop="deductionAmount">
              {{entity.deductionAmount}}
            </el-form-item>
          </el-col>
          <el-col :span="8" class="r-form-cell">
            <el-form-item label="对账金额" prop="amount">
              {{entity.amount}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="剩余金额" prop="amount">
              {{entity.amount - entity.payAmount}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <grid v-show="businessShow" gridTitle="单据明细" :columns="businessColumns" :multi="false" :loading="false" ref="businessMainGrid" :queryEntity="{}" :pagination="false"
              cellClassName="table-view-row" headerCellClassName="table-view-row">
            </grid>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <grid v-show="true" gridTitle="商品明细" :columns="goodsColumns" :multi="false" :url="queryGoodsUrl" :loading="true" ref="goodsMainGrid" :queryEntity="goodQueryEntity"
              :pagination="false" cellClassName="table-view-row" headerCellClassName="table-view-row"></grid>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <grid v-show="adjeustShow" gridTitle="调整单" :columns="columns" :multi="false" :loading="false" ref="mainGrid" :queryEntity="{}" :pagination="false"
              cellClassName="table-view-row" headerCellClassName="table-view-row"></grid>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <grid v-show="payShow" :columns="payColumns" gridTitle="收付款" :multi="false" :url="queryUrl" ref="payMainGrid" :loading="false" :queryEntity="queryEntity"
              :pagination="false" cellClassName="table-view-row" headerCellClassName="table-view-row">
            </grid>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="height:30px"></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            本厂确认:
          </el-col>
          <el-col :span="12">
            客户确认:
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import grid from '@/components/Grid'
import buttons from '@/components/Buttons'
import { Message, MessageBox } from 'element-ui'
import { initMenu } from "@/util/util";
import { resolveUrlPath } from "@/util/util";
import { mapGetters } from 'vuex'
import { YesOrNoFormatter, PayTypeFormatter } from '@/const/dict'

export default {
  components: { grid, buttons },
  data () {
    return {
      queryUrl: url.PAY_LIST_URL,
      queryGoodsUrl: url.BILL_GOODS_DETAIL_URL,
      disabled: true,
      opShow: false,
      businessShow: false,
      adjeustShow: false,
      payShow: false,
      entity: {},
      billNo: null,
      goodQueryEntity: { billType: "ALL" },
      queryEntity: { billNo: null },
      goodsColumns: [
        { label: '业务单号', width: 180, prop: 'bizCode', align: 'center' },
        { label: this.global.modelName, width: 100, prop: 'goodsName', align: 'center' },
        { label: this.global.modelProp, width: 80, prop: 'modelProp', align: 'center' },
        { label: '物料名称', width: 300, prop: 'materialName', align: 'center' },
        //{ label: '单位', width: 80, prop: 'unit', align: 'center' },
        { label: '单价', width: 80, prop: 'price', align: 'center' },
        { label: '数量', width: 100, prop: 'quantity', align: 'center' },
        { label: '总价', width: 115, prop: 'totalAmount', align: 'center' }
      ],
      payColumns: [
        { label: '付款单号', width: 180, prop: 'payCode', align: 'center' },
        { label: '对账单号', width: 180, prop: 'billNo', align: 'center' },
        { label: '类型', width: 100, prop: 'payType', align: 'center', formatter: PayTypeFormatter },
        { label: '金额', width: 120, prop: 'amount', align: 'center' },
        { label: '备注', width: 265, prop: 'remark', align: 'center' },
        { label: '收付款时间', width: 100, prop: 'payTime', align: 'center' }
      ],
      businessColumns: [
        { label: '业务单号', width: 180, prop: 'businessCode', align: 'center' },
        { label: '客户名称', width: 295, prop: 'customerName', align: 'center' },
        { label: '数量', width: 80, prop: 'quantity', align: 'center' },
        //  { label: '单价', width: 80, prop: 'price', align: 'center' },
        { label: '金额', width: 100, prop: 'amount', align: 'center' },
        { label: '扣款金额', width: 80, prop: 'deductionAmount', align: 'center' },
        { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      columns: [
        { label: '调整单号', width: 180, prop: 'adjustNo', align: 'center' },
        { label: '对账单号', width: 180, prop: 'billNo', align: 'center' },
        { label: '客户名称', width: 180, prop: 'customerName', align: 'center' },
        { label: '金额', width: 100, prop: 'amount', align: 'center' },
        { label: '原因', width: 200, prop: 'remark', align: 'center' },
        // { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  created () {
    this.billNo = this.$route.query.billNo
    this.queryEntity.billNo = this.billNo
    this.goodQueryEntity.billNo = this.billNo
    this.goodQueryEntity.billSource = this.$route.query.billSource
    this.init();
  },
  methods: {
    init () {
      this.viewOp(this.billNo).then((data) => {
        if (data) {
          if (data.businessVOS) {
            this.businessShow = data.businessVOS.length != 0
          }
          if (data.adjustVos) {
            this.adjeustShow = data.adjustVos.length != 0
          }
          this.payShow = (data.orderStatus == 'FINISH' || data.orderStatus == 'SETTLEMENT')
          this.entity = data
          this.$refs['mainGrid'].initData(data.adjustVos)
          this.$refs['businessMainGrid'].initData(data.businessVOS)
          this.$refs['payMainGrid'].doQuery(null, this.queryEntity)
        }
      })
    },
    cancel () {
      this.$router.go(-1)
    },
    viewOp (billNo) {
      return request({
        url: url.FINA_BILL_VIEW_URL,
        method: 'post',
        params: { billNo },
        data: { billNo }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.b-box {
  width: 1024px;
}

.view-title {
  width: 100%;
  height: 60px;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}

.grid-rq {
  border: 1px solid black !important;
}
</style>
